<template>
<div>
  <div class="item" v-for="(item,index) in list" :key="item.customerId" @click="goDetail(item)" >
    <div class="display-flex  justify-content-flex-justify item-top-tip align-items-center">
      <span class="item-time">{{item.dateStr}}</span>
      <span class="item-status" v-if="item.registState=='未注册'">{{item.registState}}</span>
    </div>
    <div class="display-flex">
      <img class="customer-head" v-lazy="getHeader(item)" alt="">
      <div class="display-flex flex-direction-column flex-1">
        <div class="display-flex">
          <span class="flex-1 store-name beyond-one">{{item.name?item.name:'暂未添加店铺名称'}}</span>
          <span class="customer-level display-flex justify-content-flex-justify align-items-center">{{item.type}}</span>
        </div>
        <div class="customer-info display-flex align-items-center">
          <span class="customer-name">{{item.contactName}}</span>
          <!--:href="'tel:'+item.phone"-->
          <a  href="javascript:void(0)" @click.stop="callUser($event,item.phone)" >
            <span class="customer-phone">{{item.phone}}</span>
            <img src="../assets/img/customer/call.png">
          </a>
        </div>
        <div class="lable-content display-flex flex-wrap-wrap">
          <div @click.stop="goCustomerLable(item)" class="customer-lable display-flex align-items-center" v-for="(itemLable,index) in item.customerTips" :key="itemLable.id">
            {{itemLable.name}}
          </div>
        </div>
        <div class="pay-info display-flex align-items-center">
          <span class="flex-1"><span class="pay-way">付款方式:</span>{{item.payWay}}</span>
          <span><span class="order-amount">订单总额:</span>{{item.totalOrderAmount}}</span>
        </div>
      </div>
    </div>
    <div class="line vux-1px-b"></div>
    <div  class="display-flex justify-content-flex-end align-items-center">
      <span @click.stop="goCustomerLable(item)" class="btn-customer-lable display-flex justify-content-flex-center align-items-center">客户标签</span>
    </div>
  </div>
</div>
</template>
<script type="text/ecmascript-6">
    export default{
       props:{
          list:{
              default:[],
              type:Array
          }
       },
      data(){
        return {

        }
      },
      methods:{
          goCustomerLable(item){
              if(this.$fromApp(this)){
                  this.$callJava({
                      title: "客户标签",
                      url:this.$webUrl+"customer/lable?from=app"+"&Authorization="+this.$storage.get("token")+"&customerId="+item.customerId
                  })
              }else{
                  this.$router.push({ path:'/customer/lable',query:{customerId:item.customerId}})
              }
          },
          getHeader(item){
              if(item.logo){
                  return item.logo.indexOf('?')==-1?item.logo+"?yasuo":item.logo
              }else{
                  return require('../assets/img/customer/customer_head.png');
              }
          },
          goDetail(item){
              console.log("====",this.$fromApp(this));
              if(this.$fromApp(this)){
                  this.$callJava({url:this.$webUrl+"customer/detail?from=app&id="+item.customerId+"&Authorization="+this.$storage.get("token"),title:"客户详情"})
              }else{
                  this.$router.push({ path:'/customer/detail',query:{id:item.customerId}})
              }
          },
          callUser(event,phone){
              if(this.$fromApp(this)){
                  this.$callJava({code:1001,phone:phone})
              }else{
                  window.location.href = "tel:"+phone;
              }
          }
      },
      watch: {
        list: function (newVal, oldVal) {
          this.list = newVal;
        }
      }
    }
</script>

<style lang="less" type="text/less" scoped>
  .item{
    margin-bottom: .2rem;
    background: #fff;
    padding: .3rem 0.32rem .15rem .32rem;
    .lable-content{
      margin-top: .1rem;
    }
    .customer-lable{
      border-radius: .05rem;
      color: #999;
      border: 1px solid #ddd;
      padding: .02rem .15rem;
      margin-right: .12rem;
      margin-bottom: .1rem;
    }
    .item-top-tip{
      margin-bottom: 0.35rem;
    }
    .item-time{
      font-size:0.26rem;
      font-weight:400;
      color:#666;
    }
    .item-status{
      font-size: 0.28rem;
      color: #FDB376;
    }
    .customer-head{
      width: 0.92rem;
      height: 0.92rem;
      margin-right: 0.18rem;
      border-radius: 0.92rem;
    }
    .store-name{
      font-size: 0.32rem;
      font-weight: bold;
      color: #333;
    }
    .customer-level{
      height: 0.42rem;
      line-height: 0.42rem;
      padding: 0 .2rem;
      background:rgba(254,246,233,1);
      border:1px solid rgba(236,218,188,1);
      border-radius:0.2rem;
      font-size: 0.24rem;
      color: #C9A872;
    }
    .customer-info{
      margin-top: .21rem;
      font-size: 0.26rem;
      .customer-name{
        margin-right: .3rem;
      }
      img{
        margin-left:0.15rem;
        width: .4rem;
        height: .4rem;
        vertical-align: middle;
      }
      a{
        text-decoration: none;
      }
      .customer-phone{
        color: #333;
      }
    }
    .pay-info{
      font-size: .26rem;
      color: #999;
      margin-top: .4rem;
      .pay-way{
        padding-right: .1rem;
      }
      .order-amount{
        padding-right: .1rem;
      }
    }
    .line{
      margin-top: .15rem;
    }
    .btn-customer-lable{
      color: #333;
      font-size: .26rem;
      padding: 0rem .3rem;
      border-radius: .3rem;
      border:  1px solid #EDEAED;
      min-height: .6rem;
      margin-top: .15rem;
    }
  }
</style>
